<template>
  <div>
    <CustomDialog :visible.sync="isShowDialog">
      <div class="desktop-content">
        <div class="desktop-column-box">预订菜品</div>
        <div class="pagingAndSearch-box">
          <div class="paging-list-box">
            <div
              class="paging-list-item"
              :class="{ 'paging-list-item-active': pagingActiveIndex === idx }"
              @click="handleSelectPaging(idx, item)"
              v-for="(item, idx) in foodOneCateList"
              :key="item.id"
            >
              <el-tooltip effect="dark" :content="item.name" placement="top">
                <div class="name">{{ item.name }}</div>
              </el-tooltip>
            </div>
            <div class="paging-list-btn">
              <img
                class="left-btn"
                @click="oneCatePreviousPage"
                src="@/assets/images/home/page-left-icon.png"
              />
              <img
                class="right-btn"
                @click="oneCateNextPage"
                src="@/assets/images/home/page-right-icon.png"
              />
            </div>
          </div>
          <div class="search-box">
            <div class="content1">
              <img src="@/assets/images/home/sousuo-icon.png" />
              <input
                v-model.trim="foodListPageQuery.keywords"
                @input="onSearch"
                placeholder="搜索菜品"
              />
            </div>
          </div>
        </div>

        <div class="desktop-scroll-list">
          <div class="scroll-list-item-content" v-if="!isEmptyFoodList">
            <div
              class="scroll-list-item"
              v-for="food in bookFoodArrList"
              :key="food.id"
              @click="handleSelectFood(food)"
            >
              <img
                class="image"
                v-if="!isEmpty(food?.images)"
                :src="food.images[0].file.preview_url"
              />
              <div class="not-good-image" v-else>
                <img class="image" src="@/assets/images/home/not-goodimage.png" />
              </div>
              <div class="desc-box">
                <el-tooltip effect="dark" :content="food.name" placement="top">
                  <div class="name">{{ food.name }}</div>
                </el-tooltip>
                <div class="money">￥{{ food.skuList[0].price }}/份</div>
                <div
                  class="count"
                  v-if="!isEmpty(food?.skuList) && !isEmpty(food?.skuList[0]?.num)"
                >
                  剩余：{{ food.skuList[0].num }}
                </div>
              </div>
              <img
                v-show="food.isChecked"
                class="choose-img"
                src="@/assets/images/home/xuanzhongzhuotai.png"
              />
            </div>
            <div
              class="scroll-list-item-zhanwei"
              v-for="val in ['v1', 'v2', 'v3', 'v4']"
              :key="val"
            ></div>
          </div>
          <div class="no-data-box" v-else>
            <NotData desc="暂无菜品数据" />
          </div>
        </div>

        <div class="pagination-box">
          <pagination
            v-show="foodListTotal > 0"
            :total="foodListTotal"
            :page.sync="foodListPageQuery.page"
            :limit.sync="foodListPageQuery.limit"
            @pagination="getAllFoodListData"
            :pageSizes="[15, 35, 75, 150]"
          />
        </div>

        <div class="btn-box">
          <div class="cancel-btn" @click="onCancel">取消</div>
          <div class="confirm-btn" @click="onConfirm">确定</div>
        </div>
      </div>
    </CustomDialog>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import CustomDialog from '@/components/CustomDialog/Index.vue'
import NotData from '@/components/NotData/Index.vue'
import Pagination from '@/components/Pagination/Index.vue'
import { deskBookFoodList } from '@/api/book'
import { isEmpty, dealAssignDataFunction, debounce } from '@/utils/toolsValidate'

const props = defineProps<{ showDialog: boolean }>()
const emit = defineEmits<{ 'update:showDialog': [boolean]; onSuccessSelectFood: [any[]] }>()

const isShowDialog = computed({
  get: () => props.showDialog,
  set: (v: boolean) => emit('update:showDialog', v)
})

const bookFoodArrList = ref<any[]>([])
const isEmptyFoodList = ref(false)
const selectFoodList = ref<any[]>([])
const pagingActiveIndex = ref(0)
const tagActiveIndex = ref(-1)
const foodOneCateList = ref<any[]>([])
const foodTwoCateList = ref<any[]>([])
const foodListPageQuery = ref<any>({ page: 1, limit: 15, category_id: null, keywords: null })
const foodCategoryPageQuery = ref<any>({ page: 1, limit: 4, parent_id: 0 })
const foodOneCategoryLastPage = ref(0)
const foodTwoCategoryLastPage = ref(0)
const oneCategoryPage = ref(1)
const twoCategoryPage = ref(1)
const foodListTotal = ref(0)

function onCancel() {
  emit('update:showDialog', false)
}
function onConfirm() {
  emit('onSuccessSelectFood', selectFoodList.value)
  emit('update:showDialog', false)
}

function handleSelectFood(item: any) {
  item.isChecked = !item.isChecked
  const idx = selectFoodList.value.findIndex((x: any) => x.name === item.name)
  if (idx === -1)
    selectFoodList.value.push({ name: item.name, num: 1, food_sku_id: item.skuList[0].id })
  else selectFoodList.value.splice(idx, 1)
}

async function getAllFoodListData() {
  const res = await deskBookFoodList({
    page: foodListPageQuery.value.page,
    limit: foodListPageQuery.value.limit
  })
  if (res?.status === 200) {
    if (!isEmpty(res?.data?.data)) res.data.data.forEach((item: any) => (item.isChecked = false))
    bookFoodArrList.value = dealAssignDataFunction([], res?.data?.data)
    foodListTotal.value = res?.data?.total || 0
    isEmptyFoodList.value = bookFoodArrList.value.length === 0
  }
}

const onSearch = debounce(() => {
  foodListPageQuery.value.page = 1
  getAllFoodListData()
}, 500)

watch(isShowDialog, v => {
  if (v) getAllFoodListData()
})
</script>
<style scoped lang="scss">
/* 复用旧项目预订菜品弹层样式的核心布局，简化版 */
.desktop-content {
  width: 1345px;
  max-height: 800px;
  min-height: 700px;
  background: #fff;
  border-radius: 20px;
  position: relative;
}
.desktop-column-box {
  padding: 0 0 20px 0;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}
.pagingAndSearch-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}
.paging-list-box {
  position: relative;
  box-sizing: border-box;
  width: 700px;
  height: 48px;
  background: #fff;
  border: 1px solid #d0d0d0;
  border-radius: 25px;
  display: flex;
  align-items: center;
}
.paging-list-item {
  display: inline-block;
  padding: 0 30px;
  height: 48px;
  line-height: 48px;
  font-size: 16px;
  color: #333;
  cursor: pointer;
}
.paging-list-item-active {
  color: #fff;
  background: #7c0a03;
  border-radius: 24px;
}
.paging-list-btn {
  position: absolute;
  top: 12px;
  right: 16px;
  display: flex;
  align-items: center;
}
.search-box {
  display: flex;
  align-items: center;
  width: 192px;
  height: 48px;
  background: #d2d2d2;
  border-radius: 24px;
  box-sizing: border-box;
}
.desktop-scroll-list {
  padding-bottom: 10px;
  max-height: 630px;
  min-height: 600px;
  box-sizing: border-box;
  overflow-y: auto;
}
.scroll-list-item-content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}
.scroll-list-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  width: 300px;
  height: 130px;
  background: #f4f4f4;
  border-radius: 12px;
  box-sizing: border-box;
  margin-top: 20px;
  cursor: pointer;
}
.scroll-list-item .image {
  width: 173px;
  height: 130px;
  border-radius: 12px 0 0 12px;
  margin-right: 10px;
}
.scroll-list-item .desc-box .name {
  width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
  font-weight: 700;
  color: #30314a;
}
.choose-img {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 24px;
  height: 24px;
}
.pagination-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
}
.btn-box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.cancel-btn {
  width: 190px;
  height: 60px;
  background: #fff;
  border: 1px solid #333;
  border-radius: 12px;
  font-size: 18px;
  text-align: center;
  line-height: 60px;
  cursor: pointer;
}
.confirm-btn {
  width: 190px;
  height: 60px;
  background: #7c0a03;
  border-radius: 12px;
  font-size: 18px;
  text-align: center;
  color: #fff;
  line-height: 60px;
  cursor: pointer;
  margin-left: 30px;
}
</style>
<template>
  <div></div>
</template>
<script>
export default { name: 'BookFoodListDialog' }
</script>
